<template>
	<view class="need-item" :class="{'inside': position == 'inside'}">
		<image @click="shrinkTypeChange" v-if="shrink == true" class="shrink-icon" :class="{'up':shrinkType == true}" src="/static/image/push_icon.png" mode="aspectFit"></image>
		<view class="title-box">
			<view class="tag">
				1.1
			</view>
			<view class="title">
				章节名称
			</view>
		</view>
		<view class="content">
			撒谎if撒党和国家爱化工江科大黄金矿工哈街科恒股份接撒看不惯客家话撒不开高
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			shrink:{
				type:Boolean,
				default:false,
			},
			shrinkType:{
				type:Boolean,
				default:false,
			},
			index:{
				type:Number,
				default:0
			},
			position:{
				type:String,
				default:'outside'
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			shrinkTypeChange:function(){
				this.$emit('shrinkTypeChange',this.index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.need-item{
		position: relative;
		padding:20rpx 40rpx;
		.shrink-icon{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 0;
			top: 20rpx;
		}
		.up{
			transform:rotate(180deg);
		}
		.title-box{
			display: flex;
			.tag{
				font-size: 24rpx;
				line-height: 30rpx;
				padding: 0 20rpx;
				height: 30rpx;
				background-color: #f6f6f6;
			}
			.title{
				font-weight: bold;
				font-size: 30rpx;
				margin-left: 20rpx;
				line-height: 30rpx;
			}
		}
		.content{
			margin-top: 20rpx;
			font-size: 24rpx;
			background-color: #f9fafb;
			min-height: 100rpx;
			padding: 10rpx;
		}
	}
	.inside{
		margin-left:40rpx;
	}
</style>
